<template>
	<div class="details" v-if="isLoad">
		<div class="film-img-wrap">
			<myimg :src="content.cover.origin"></myimg>
			<!--<img :src="{{content.poster.origin}}"/>-->
		</div>
		<div class="film-intro">
			<div class="film-word1">影片简介</div>
			<div class="film-word2">
				<span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
				<span>{{content.director}}</span>
			</div>
			<div class="film-word2">
				<span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
				<span>{{content.actors[0].name}} | {{content.actors[1].name}} </span>
			</div>
			<div class="film-word2">
				<span>地区语言：</span>
				<span> {{content.nation}}</span>
				<span>(</span><span>{{content.language}}</span><span>)</span>
			</div>
			<div class="film-word2">
				<span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>
				<span> {{content.category}}</span>
			</div>
			<div class="film-word2">
				<span>上映日期：</span>
				<span>7月07日上映</span>
			</div>
			<div class="film-word3">{{content.synopsis}}</div>
		</div>
		<div class="operation">
			<button class="cpn-primary-button">立即购票</button>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import myimg from "./myimg"
	export default {
		name: "move",
		data() {
			return {
				isLoad:false,
				content:{},
			}
		},
		methods:{
			
		},
		
		created(){
			var id = this.$route.params.id;
			axios.get("http://m.maizuo.com/v4/api/film/"+id).then((res)=>{
				this.content = res.data.data.film;
				this.isLoad = true;
			})
		},
		components:{
			myimg
		}
	}
</script>

<style lang="scss">
	.details {
		box-sizing: border-box;
		.film-intro {
			line-height: 18px;
			-webkit-user-select: text;
			-moz-user-select: text;
			-ms-user-select: text;
			.film-word1 {
				margin: 16px auto;
				border-left: 16px solid RGB(228, 200, 156);
				font-size: 16px;
				padding-left: 4px;
			}
			.film-word2 {
				height: 18px;
				overflow: hidden;
				margin-bottom: 10px;
				padding-left: 20px;
				font-size: 14px;
			}
			.film-word3 {
				text-overflow: ellipsis;
				margin-bottom: 80px;
				padding-left: 20px;
				padding-right: 20px;
				font-size: 14px;
			}
		}
		.operation {
			position: fixed;
			left: 0;
			bottom: 20px;
			width: 100%;
			text-align: center;
			.cpn-primary-button {
				font-size: 14px;
				min-width: 156px;
				height: 36px;
				line-height: 36px;
				border: none;
				background-color: #fe8233;
				padding: 0;
				margin: 0;
				border-radius: 18px;
				color: #fff;
				-webkit-transition: .5s ease;
			}
		}
	}
</style>